<template>
  <div class="max-1200" v-if="windowWidth > 992">
    <div id="crumbs" class="max-1200">
      <img src="@/assets/icon/weizhi.png" alt="" class="ic"/>
      <a href="/admin">{{ globalLanguage.languageSuffix === 'Cn' ? '首页' : 'Главная страница' }}</a> &gt;
      <router-link to="/admin/case">{{ globalLanguage.languageSuffix === 'Cn' ? '经典案例' : 'Случаи' }}</router-link>&gt;
      <a>{{ globalLanguage.languageSuffix === 'Cn' ? '案例详情' : 'Подробности дела' }}</a>

    </div>
    <h2 class="title1">
      <el-input v-model="item['title'+ globalLanguage.languageSuffix]" clearable size="large"
                placeholder="请输入案例标题" style="width: 30%;"/>
      <el-button type="primary" @click="updatecasexq" style="margin-left: 10px;">
        {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
      </el-button>
    </h2>
    <img :src="isHttp(item.imgUrl)" style="width: 40%; height: 250px;" class="max-1200"/>
    <el-upload style="text-align: center"
               :action="`${apiUrl}/jdal/updateCasexqImg`"
               :show-file-list="false"
               :on-success="handleSuccess"
               :before-upload="beforeUpload"
               :data="{ id: item.id }"
    >
      <el-button type="warning" size="large" style="margin-top: 20px;">
        {{ globalLanguage.languageSuffix === 'Cn' ? '修改图片' : 'Загрузить изображение' }}
      </el-button>
    </el-upload>
    <div style="margin-bottom: 50px">
      <div class="max-1200" style="line-height: 60px">
        <!--      <p v-html="item['desc' + globalLanguage.languageSuffix]"></p>-->
        <p style="text-align: center">
          <el-input type="textarea" :rows="20" v-model="item['desc' + globalLanguage.languageSuffix]"
                    placeholder="请输入案例详情" style="width: 100%;"/>
          <el-button type="primary" @click="updatecasexq">
            {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
          </el-button>
        </p>
      </div>
    </div>
    <!-- 上一篇和下一篇 -->
    <div class="navigation max-1200">
      <a class="nav-link previous" href="#" @click.prevent="navigateToNext">
        &lt; 上一篇
      </a>
      <a class="nav-link next" href="#" @click.prevent="nextdetail">
        下一篇 &gt;
      </a>
    </div>
  </div>
  <div class="mbiphone" v-else>
    <div class="AnLixq">
      <!--面包屑 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/admin' }">{{ globalLanguage.languageSuffix == 'Cn' ? '首页' : 'главная' }}
        </el-breadcrumb-item>
        <el-breadcrumb-item @click="handleClassicCaseClick">
          {{ globalLanguage.languageSuffix == 'Cn' ? '经典案例' : 'Классический случай' }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ globalLanguage.languageSuffix == 'Cn' ? '案列详情' : 'Детали случая' }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="AnLixq-header">
        <h3> {{ item["title" + globalLanguage.languageSuffix] }}</h3>
      </div>
      <div class="AnLixq-tupian">
        <img :src="isHttp(item.imgUrl)" alt="案例展示"
             class="carousel-image"/>
      </div>
      <div class="AnLixq-content">
        <p>{{ item['desc' + globalLanguage.languageSuffix] }}</p>
      </div>
    </div>
    <!--  底部上一章下一章按钮 -->
    <div class="AnLixq-footer">
      <el-button-group class="AnLixq-footer-btn">
        <el-button type="primary" @click="navigateToNext">
          &lt;{{ globalLanguage.languageSuffix == 'Cn' ? '上一篇' : 'Предыдущая статья' }}
        </el-button>
        <el-button type="primary" @click="nextdetail">
          {{ globalLanguage.languageSuffix == 'Cn' ? '下一篇' : 'Следующая статья' }} &gt;
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import {findjdalById, findjdalprevById, findjdalnextById, updatejdal} from "@/api/jdal.js";
import {ref, onMounted, onUnmounted} from "vue";

const apiUrl = ref(import.meta.env.VITE_APP_BASE_API);
import {useRoute} from 'vue-router';
import router from "@/router/router.js";
import {ElMessage} from "element-plus";
import {isHttp} from "@/utils/index.js";

const windowWidth = ref(window.innerWidth);
// 创建一个响应式的 item 对象
const item = ref({});
const handleClassicCaseClick = () => {
  // 跳转到经典案例页面
  router.back();
}
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
// 使用 onMounted 生命周期钩子
onMounted(() => {
  // 获取当前路由
  const route = useRoute();
  // 获取路径参数 id
  const id = route.query.id; // 获取查询参数 id
  if (id) {
    // 假设你有一个函数 detailsNews 来获取新闻详情
    detail(id);
  }
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
});
const detail = async (id) => {
  const data = await findjdalById(id);
  console.log(data, "sssss")
  item.value = data.jdal;
}
const nextdetail = async () => {
  const data = await findjdalnextById(item.value.id);
  if (data.code === 200) {
    item.value = data.jdal;
    console.log(data, "sssss")
  } else if (data.code === 1404) {
    ElMessage.warning("没有下一篇了");
  }
}
const navigateToNext = async () => {
  const data = await findjdalprevById(item.value.id);
  if (data.code === 200) {
    item.value = data.jdal;
  } else if (data.code === 1404) {
    ElMessage.warning("没有上一篇了");
  }
}


//上传成功后回调
const handleSuccess = (response, file) => {
  console.log('上传成功的响应:', response);
  console.log('上传的文件信息:', file); // 查看文件信息
  if (response && response.url) {
    item.value.imgUrl = response.url; // 更新logo为上传成功的图片URL
    ElMessage.success('图片修改成功');
    // 更新页面
    detail(item.value.id);
    console.log('更新后的logo:', item.value.imgUrl); // 查看更新后的logo
  }
};
// 在上传前检查文件的有效性
const beforeUpload = (file) => {
  console.log('准备上传的文件:', file); // 输出文件信息
  const isImage = file.type.startsWith('image/');
  console.log('是否是图片文件:', isImage);
  if (!isImage) {
    console.log('只能上传图片文件！');
    ElMessage.error('上传的文件必须是图片！');
    return false; // 阻止上传
  }
  return true; // 继续上传
};

//更新经典案例详情
const updatecasexq = async () => {
  const data = await updatejdal(item.value);
  if (data.code === 200) {
    ElMessage.success("修改成功");
    //刷新页面
    detail(item.value.id);
  }else {
    ElMessage.error("修改失败");
  }
}


</script>

<style scoped>

.navigation {
  position: relative;
  margin-top: 20px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-link {
  color: black; /* 字体颜色为黑色 */
  text-decoration: none;
}

.previous {
  position: absolute;
  bottom: 0; /* 左下角 */
  left: 0;
}

.next {
  position: absolute;
  bottom: 0; /* 右下角 */
  right: 0;
}

.nav-link:hover {
  text-decoration: underline;
}

.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
}

.AnLixq-header {
  margin-top: 20px;
  text-align: center;
}

.AnLixq {
  /*  margin-top: -300px*/
}

.AnLixq-tupian {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 50px; /* 添加一些内边距 */
  border-radius: 8px; /* 边角圆润 */

}

.AnLixq-tupian img {
  max-width: 100%; /* 图片最大宽度为容器的100% */
  max-height: 200px; /* 可以设置一个最大高度 */
  height: auto; /* 自动调整高度以保持比例 */
  border-radius: 6px; /* 图片圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  object-fit: fill; /* 填充整个img元素，可能剪裁cover */
}

.AnLixq-content {
  text-align: justify; /* 两端对齐 */
  padding-left: 45px; /* 设置内边距 */
  padding-right: 45px; /* 设置内边距 */
  font-size: 16px; /* 调整文字大小，可以根据需求修改 */
  text-indent: 2em; /* 段落开头空两个字，单位为em，可以根据需求调整 */
  line-height: 1.6; /* 调整行高，提高可读性，可选 */
  color: #333; /* 设置字体颜色，通常选择深色以提高可读性 */
  font-family: 'Georgia', serif; /* 设置字体类型，可以根据需要更改 */
}

/* 底部按钮 */
.AnLixq-footer-btn {
  display: flex;
  justify-content: space-between !important;
  margin-top: 20px;
}

.AnLixq-footer-btn .el-button {
  transition: background-color 0.3s ease; /* 添加平滑过渡 */
}

.AnLixq-footer-btn .el-button:active {
  background-color: #d15f25; /* 点击时的橙棕色 */
  color: white; /* 修改文字颜色为白色以提高对比度 */
}
</style>
